<template>
<div>
  <div style="background-color: #edf2fc;min-height: 820px;padding-top: 10px">
    <el-card style="width: 500px;margin: 50px auto 0">
      <p style="margin:0 0 30px 0;font-size: 25px;font-weight: bold;position: relative"><i class="el-icon-arrow-left" @click="rollBack"></i> 我的收货地址</p>
      <el-form :model="consignee" :rules="rules" ref="consignee" label-width="100px" class="demo-ruleForm">
        <el-form-item label="收货人" prop="name">
          <el-input v-model="consignee.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="consignee.phone"></el-input>
        </el-form-item>
        <el-form-item label="所在地区" prop="nativePlace">
          <el-cascader size="large" :options="options" style="width: 355px" v-model="consignee.nativePlace" @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="detailAddress">
          <el-input v-model="consignee.detailAddress"></el-input>
        </el-form-item>
        <el-form-item label="设为默认" prop="value">
          <el-switch v-model="value" style="margin-left: 10px">
          </el-switch>
          <el-form-item>
            <el-button type="primary" @click="add" style="margin-left: 90px">添加</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</div>
</template>

<script>
import {CodeToText, regionData} from "element-china-area-data";
import axios from "axios";
export default {
  data(){
    return{
      value:false,
      consignee:{},
      options: regionData,
      line:""
    }
  },
  methods:{
    rollBack(){
      history.back()
    },
    handleChange(value){

      if (value[1] != null && value[2] != null) {
        this.line =
            CodeToText[value[0]] +
            CodeToText[value[1]] +
            CodeToText[value[2]]
      } else {
        if (value[1] != null) {
          this.line = CodeToText[value[0]] + CodeToText[value[1]]
        } else {
          this.line = CodeToText[value[0]]
        }
      }
    },
    add(){
      let consigneeUrl = 'http://localhost:8080/consignee/add'
      if (this.value){
        this.consignee.isDefault=1
      }else {
        this.consignee.isDefault=0
      }
      this.consignee.nativePlace = this.line
      axios.post(consigneeUrl,this.consignee).then((response) => {
        location.href="/myAddress"
      })
    }
  }
}
</script>

<style scoped>

</style>